import React, { useMemo ,useState} from 'react';
import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';

// const initialValue = [
//   {
//     type: 'paragraph',
//     children: [{ text: '这是一段初始的文字' }],
//   },
// ];
function App({ value = '', onChange = () => {} }: any) {
  // 创建一个在渲染中保持不变的 slate editor 对象
  const editor = useMemo(() => withReact(createEditor()), [])
  const [valu] = useState(
    value||[
    {
      type: 'paragraph',
      children: [{ text:'段落中的一行文本。' }],
    },
  ])
  // const onClick = (event :any) => {
  //   console.log(event)
  //   // 当没有返回值，并且没有设置 preventDefault 和 stopPropagation 时，Slate 将执行自带的事件处理程序
  // };
  // const onDrop = (event :any) => {
  //   console.log(event)
  //   // 如果返回 true，Slate 将认为该事件已被处理，不会执行自身的事件处理程序
  //    return true
  //   }
  // ;
  // const onDragStart = (event:any) => {
  //   console.log(event)
  //   // 如果返回 false，Slate 会认为事件还未被处理，之后 Slate 将执行自身的事件处理程序
  //   return false
  //   }
  // ;

  return (
    // <Slate editor={editor} value={initialValue}>
    //    <Editable
    //         onClick={onClick}
    //         onDrop={onDrop}
    //         onDragStart={onDragStart}
    //     />
    // </Slate>
    <Slate editor={editor} value={valu} onChange={(values:any) => {
      onChange(values)}}>
      <Editable />
    </Slate>
  );
}

export default App
